Vue实现前端页面缓存 |
您所在的位置：网站首页 › vue 数据缓存清除 › Vue实现前端页面缓存 |
Vue实现前端页面缓存
|
一、使用情景
在使用Vue开发单页面应用时，我们通常会使用Vue-Router进行页面导航，Vue-Router在进行路由切换的时候，页面是会重新加载，对应的生命周期函数也会再次执行一遍，但是在有些业务场景下， 比如： 在有分页数据列表中，切换到第三页需要查看列表对应数据的详情页面，然后返回，如果不加任何处理，列表页面会重新加载，默认显示第一页数据，而不在是之前的第三页，这样如果还需要查看之前查看数据的下一条时，还需要切换到第三页，如此反复。在列表页面进行条件筛选查询，查询到对应的数据后查询详情，跳转详情页面，然后在返回，列表默认会清空查询条件，显示所有数据。以上两种情景都会带来很不好的用户体验。此时，就需要对列表页面进行路由缓存。在Vue-Router中可以使用keep-alive进行路由页面缓存。 二、keep-alive基本认识 Vue中提供了一个内置组件keep-alive，使用元素将动态组件包裹起来，内部组件就会被缓存起来。包裹的组件，加载过的页面，再次进入时，是不会执行页面第一次进入时的部分生命周期函数。包裹的组件会新增两个生命周期函数activated和deactivated.两个属性include和exclude可以让实现有条件的进行缓存。include包含的组件会被进行缓存，exclude包含的组件不会被缓存。 三、keep-alive实现路由页面缓存通过keep-alive实现路由页面缓存有两种如下两种方式： （一）、使用include控制需要缓存的页面 // home.vue ... export default{ data() { return { // 要缓存的组件 cashViews: ['list'] } } }// list.vue export default{ // 在组件内路由守卫钩子函数中处理逻辑 beforeRouteEnter (to, from, next) { if (from.name === 'Index') { // 处理页面缓存后，返回首页再次进入缓存页时数据为更新 // 该生命周期无法获取到this，因此把vm实例当作参数传递 next(vm => { vm.pages.pageNum = 1 // 因为我这里查询表单是动态的，所以首页进入时需要调用一次，在改方法中请求返回后调用了获取列表数据getTableDatas方法 vm.getQueryList() }) } else if (!from.name) { // 处理刷新页面时，获取动态表单方法未执行，导致表单无法加载 next(vm => { vm.getQueryList() }) } else { // 详情返回时只更新列表数据，因为如果在详情页面做了操作，列表数据状态会改变，其他使用缓存 next(vm => { vm.getTableDatas() }) } } } 以上实现，是针对我自己项目业务场景的实现，如果查询表单不是动态获取的，是页面写死的，可以在activated钩子中调用查询列表数据方法。这样每次进入的缓存页面的时候，只会更新列表数据，不会改变其他缓存。 问题：同样会存在，列表缓存数据后，返回首页，再次进入列表页面，缓存数据还在，这样可以在路由守卫beforeRouterLeave钩子中处理。 activated() { this.getTableDatas() }, beforeRouterLeave(to, from, next) { if (from.name === 'Index') { // 如果从首页进入时调用重置方法 this.reset() } }两点注意： 要缓存的路由组件必须设置name属性，跟cashViews中的值对应；如果要缓存的组件比较多时，可以使用vuex管理cashViews。 （二)、根据v-if控制显示的router-view 在路由表routes中配置meta属性，新增keepAlive属性，需要缓存的页面设置keepAlive为true. { path: '/list', name: 'List', component: List, meta: { keepAlive: true } } 根据当前访问路由的keepAlive值控制是否缓存组件 // home.vue ... 在组件的守卫钩子中修改keepAlive的值，控制页面缓存与否 // List.vue export default { /* 从List组件离开时,修改keepAlive值为false，保证进入该页面时页面刷新 */ beforeRouteLeave(to, from, next) { from.meta.keepAlive = false next() } }// Detail.vue export default { /*从Detail返回List时，修改List的keepAlive为true,确保返回List页面时使用缓存不刷新页面 */ beforeRouteLeave(to, from, next){ if(to.name === 'List') { to.meta.keepAlive = true } next() } }
|
【本文地址】